<template>
  <div id="permission">
    <div class="PerLeft">
      <div class="Name">MMIS</div>
      <el-tree
        :data="Menudata"
        :props="defaultProps"
        @node-click="handleNodeClick"
        :highlight-current="true"
      ></el-tree>
    </div>
    <div class="PerRight">
      <div class="operation">
        <div class="buttons">
          <el-button type="primary" @click="clickAdd">新增</el-button>
          <el-button type="primary">扫描</el-button>
          <el-button type="primary">导入</el-button>
        </div>
        <div class="inputs">
          <div style="margin-right:30px;">
            <input type="checkbox" :checked="FailValue" @click="ChangeValue" />已失效
          </div>
          <div class="check" style="margin-right:10px;">
            <!-- <input type="text" placeholder="请输入搜索关键字" v-model="InputValue" />
            <i class="iconfont icon-sousuo" @click="FindData"></i>-->
            <el-input
              v-model="InputValue"
              placeholder="请输入搜索关键字"
              maxlength="15"
              style="width:330px;"
            ></el-input>
            <i class="iconfont icon-sousuo" @click="FindData"></i>
          </div>
          <div>
            <i class="iconfont icon-shuaxin" style="margin-right:0px;" @click="GoReload"></i>
          </div>
        </div>
      </div>
      <el-table
        :data="PerData"
        :header-cell-style="{background:'#F5F5F5'}"
        style="padding-left:20px;padding-right:20px;margin-top:20px;"
        show-overflow-tooltip
      >
        <el-table-column
          v-for="(item,index) in tableTitle"
          :key="index"
          :prop="item.tableprop"
          :label="item.name"
          align="center"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column prop label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.Pstate =='启用'"
              type="text"
              size="small"
              @click="ClickChange(scope.row)"
            >编辑</el-button>
            <el-button
              v-if="scope.row.Pstate =='启用'"
              type="text"
              size="small"
              @click="ClickDelete(scope.row)"
            >删除</el-button>
            <el-button
              v-if="scope.row.Pstate =='已失效'"
              type="text"
              size="small"
              @click="ClickRemove(scope.row)"
            >清除</el-button>
            <el-button
              v-if="scope.row.Pstate =='已失效'"
              type="text"
              size="small"
              @click="ClickRecyce(scope.row)"
            >回收</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="Pages">
        <el-pagination
          :hide-on-single-page="true"
          :page-size="pagesize"
          :pager-count="9"
          layout="prev, pager, next"
          :total="total"
          @current-change="current_change"
        ></el-pagination>
      </div>
    </div>
    <!-- 新增权限弹出框 -->
    <el-dialog title="新增权限项" center :visible.sync="Adddialog" width="30%">
      <el-form label-width="80px" :model="formData">
        <el-form-item label="名称:">
          <el-input v-model="formData.PName" placeholder="请输入权限项名称"></el-input>
        </el-form-item>
        <el-form-item label="类型:">
          <el-select placeholder="请选择权限类型:" v-model="PTypeValue" style="width:100%;">
            <el-option
              v-for="item in PTypedata"
              :key="item.PId"
              :label="item.PType"
              :value="item.PId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="ChangeType == '1'" label="父权限:">
          <el-select placeholder="请选择权限类型:" v-model="ParentValue" style="width:100%;">
            <el-option
              v-for="item in Parentdata"
              :key="item.PId"
              :label="item.PName"
              :value="item.PId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="ChangeType == '2'" label="绑定接口:">
          <el-input v-model="formData.Url" placeholder="请输入接口路径"></el-input>
        </el-form-item>
        <el-form-item label="资源:">
          <el-input v-model="formData.Resoures" placeholder="请输入资源名称"></el-input>
        </el-form-item>
        <el-form-item label="描述:">
          <el-input type="textarea" v-model="formData.Description"></el-input>
        </el-form-item>
        <el-form-item style="text-align:right">
          <el-button type="primary" @click="SendValue">确定</el-button>
          <el-button style @click="cancelAdd">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 编辑权限弹出框 -->
    <el-dialog title="编辑权限项" center :visible.sync="AdddialogTwo" width="30%">
      <el-form label-width="80px" :model="formDataTwo">
        <el-form-item label="名称:">
          <el-input v-model="formDataTwo.PName" placeholder="请输入权限项名称"></el-input>
        </el-form-item>
        <el-form-item label="类型:">
          <el-select placeholder="请选择权限类型:" v-model="PTypeValueTwo" style="width:100%;">
            <el-option
              v-for="item in PTypedata"
              :key="item.PId"
              :label="item.PType"
              :value="item.PId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="父权限:">
          <el-select placeholder="请选择权限类型:" v-model="ParentValueTwo" style="width:100%;">
            <el-option
              v-for="item in ParentdataTwo"
              :key="item.PId"
              :label="item.PName"
              :value="item.PId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="资源/接口:">
          <el-input v-model="formDataTwo.Resoures" placeholder="请输入资源/接口名称"></el-input>
        </el-form-item>
        <el-form-item label="描述:">
          <el-input type="textarea" v-model="formDataTwo.Description"></el-input>
        </el-form-item>
        <el-form-item style="text-align:right">
          <el-button type="primary" @click="editYes">确定</el-button>
          <el-button style @click="cancelAddTwo">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Permission",
  data() {
    return {
      total: 0,
      pagesize: 10,
      InputValue: "",
      FailValue: true,
      CheckboxVal: "1",
      AllPid: null,
      Menudata: [],
      ChangeType: null,
      defaultProps: {
        children: "Children",
        label: "PName"
      },
      PerData: [],
      tableTitle: [
        { name: "状态", tableprop: "Pstate" },
        { name: "名称", tableprop: "PName" },
        { name: "类型", tableprop: "PType" },
        { name: "父权限", tableprop: "ParentPName" },
        { name: "资源", tableprop: "ResouresName" },
        { name: "描述", tableprop: "Description" }
      ],
      Adddialog: false,
      formData: {
        PName: "",
        Resoures: "",
        Description: "",
        Url: ""
      },
      PTypeValue: "",
      PTypedata: [
        { PId: "1", PType: "模块" },
        { PId: "2", PType: "控件" },
        { PId: "3", PType: "接口" }
      ],
      ParentValue: "",
      Parentdata: [],
      AdddialogTwo: false,
      formDataTwo: {
        PName: "",
        Resoures: "",
        Description: "",
        PId: ""
      },
      PTypeValueTwo: "",
      ParentValueTwo: "",
      ParentdataTwo: []
    };
  },
  methods: {
    //点击勾选
    ChangeValue() {
      if (this.FailValue) {
        this.FailValue = false;
        this.CheckboxVal = "0";
      } else {
        this.FailValue = true;
        this.CheckboxVal = "1";
      }
    },
    FindData() {
      let json = {
        MN: "QueryPermission",
        DataContent: {
          KeyWord: this.InputValue,
          IsDel: this.CheckboxVal,
          PId: this.AllPid,
          PageIndex: null
        }
      };
      this.MIX_send(json);
    },
    clickAdd() {
      this.Adddialog = true;
    },
    cancelAdd() {
      this.Adddialog = false;
      this.formData.PName = "";
      this.formData.Resoures = "";
      this.formData.Description = "";
      this.formData.Url = "";
      this.PTypeValue = "";
      this.ParentValue = "";
    },
    SendValue() {
      let json = {
        MN: "AddPermission",
        DataContent: {
          PName: this.formData.PName,
          PType: this.PTypeValue,
          ParentPId: this.ParentValue,
          Url: this.formData.Url,
          ResouresName: this.formData.Resoures,
          Description: this.formData.Description
        }
      };
      this.MIX_send(json);
    },
    cancelAddTwo() {
      this.AdddialogTwo = false;
    },
    GoReload() {
      this.$router.go(0);
    },
    handleNodeClick(r) {
      //点击菜单导航
      this.AllPid = r.PId;
      let json = {
        MN: "QueryPermission",
        DataContent: {
          KeyWord: "",
          IsDel: this.CheckboxVal,
          PId: this.AllPid,
          PageIndex: null
          //此处PageIndex不能传1？
        }
      };
      this.MIX_send(json);
    },
    current_change(currentPage) {
      let json = {
        MN: "QueryPermission",
        DataContent: {
          KeyWord: "",
          IsDel: this.CheckboxVal,
          PId: this.AllPid,
          PageIndex: currentPage
        }
      };
      this.MIX_send(json);
      // this.currentPage = currentPage;
    },
    //点击编辑
    ClickChange(r) {
      // let json = {
      //   MN: "QueryModular",
      //   DataContent: {}
      // };
      // this.MIX_send(json);
      this.AdddialogTwo = true;
      this.formDataTwo.PName = r.PName;
      this.formDataTwo.Resoures = r.ResouresName;
      this.formDataTwo.Description = r.Description;
      this.formDataTwo.PId = r.PId;
      this.PTypeValueTwo = r.PType;
      this.ParentValueTwo = r.ParentPId;
    },
    //点击编辑确定
    editYes() {
      let json = {
        MN: "UpdatePermission",
        DataContent: {
          PId: this.formDataTwo.PId,
          PName: this.formDataTwo.PName,
          PType:
            this.PTypeValueTwo == "模块"
              ? "1"
              : this.PTypeValueTwo == "控件"
              ? "2"
              : this.PTypeValueTwo == "接口"
              ? "3"
              : "",
          ParentPId: this.ParentValueTwo,
          Resoures: this.formDataTwo.Resoures,
          Description: this.formDataTwo.Description
        }
      };
      this.MIX_send(json);
    },
    ClickRemove(r) {
      this.$confirm("是否清除此权限?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let json = {
            MN: "UpdatePermissionState",
            DataContent: {
              PId: r.PId,
              PState: "3"
            }
          };
          this.MIX_send(json);
        })
        .catch(() => {});
    },
    ClickRecyce(r) {
      this.$confirm("是否回收此权限?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let json = {
            MN: "UpdatePermissionState",
            DataContent: {
              PId: r.PId,
              PState: "1"
            }
          };
          this.MIX_send(json);
        })
        .catch(() => {});
    },
    //点击删除
    ClickDelete(r) {
      this.$confirm("是否删除此权限?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let json = {
            MN: "UpdatePermissionState",
            DataContent: {
              PId: r.PId,
              PState: "2"
            }
          };
          this.MIX_send(json);
        })
        .catch(() => {});
    }
  },
  mounted() {
    //查询树
    let json_one = {
      MN: "QueryPermissionTree",
      DataContent: {}
    };
    this.MIX_send(json_one);
    let json_two = {
      MN: "QueryModular",
      DataContent: {}
    };
    this.MIX_send(json_two);
  },
  watch: {
    //监听勾选状态的变化
    FailValue: function() {
      let json = {
        MN: "QueryPermission",
        DataContent: {
          KeyWord: "",
          IsDel: this.CheckboxVal,
          PId: this.AllPid,
          PageIndex: 1
        }
      };
      this.MIX_send(json);
    },
    PTypeValue: function() {
      if (this.PTypeValue == "1" || this.PTypeValue == "2") {
        this.ChangeType = "1";
      } else if (this.PTypeValue == "3") {
        this.ChangeType = "2";
      } else {
        this.ChangeType = null;
      }
    },
    "$store.state.Permission.MNvalue.QueryModular": function(data) {
      if (data.Code == "0") {
        this.Parentdata = data.ReturnData;
        this.ParentdataTwo = data.ReturnData;
      } else {
        this.$message({
          showClose: true,
          message: data.Message
        });
      }
    },
    "$store.state.Permission.MNvalue.UpdatePermissionState": function(data) {
      if (data.Code == "0") {
        this.$message({
          showClose: true,
          message: "操作成功"
        });
        //重新请求数据
        let json = {
          MN: "QueryPermissionTree",
          DataContent: {}
        };
        this.MIX_send(json);
      } else {
        this.$message({
          showClose: true,
          message: data.Message
        });
      }
    },
    "$store.state.Permission.MNvalue.QueryPermissionTree": function(data) {
      if (data.Code == "0") {
        this.Menudata = data.ReturnData;
        //请求权限数据
        let json = {
          MN: "QueryPermission",
          DataContent: {
            KeyWord: "",
            IsDel: this.CheckboxVal,
            PId: this.AllPid,
            PageIndex: "1"
          }
        };
        this.MIX_send(json);
      } else {
        this.$message({
          showClose: true,
          message: data.Message
        });
      }
    },
    "$store.state.Permission.MNvalue.QueryPermission": function(data) {
      if (data.Code == "0") {
        let arr = data.ReturnData;
        arr.forEach((value, index) => {
          arr[index].Pstate =
            arr[index].Pstate == "1"
              ? "启用"
              : arr[index].Pstate == "2"
              ? "已失效"
              : "已失效";
          arr[index].PType =
            arr[index].PType == "1"
              ? "模块"
              : arr[index].PType == "2"
              ? "控件"
              : arr[index].PType == "3"
              ? "接口"
              : arr[index].PType == "4"
              ? "字段"
              : "未知4";
        });
        this.PerData = arr;
        if (data.TotalCount) {
          this.total = data.TotalCount;
        } else {
          this.total = data.ReturnData.length;
        }
      } else {
        this.$message({
          showClose: true,
          message: data.Message
        });
      }
    },
    "$store.state.Permission.MNvalue.AddPermission": function(data) {
      if (data.Code == "0") {
        this.$message({
          showClose: true,
          message: "新增成功"
        });
        this.$router.go(0);
      } else {
        this.$message({
          showClose: true,
          message: data.Message
        });
      }
    },
    "$store.state.Permission.MNvalue.UpdatePermission": function(data) {
      if (data.Code == "0") {
        this.$message({
          showClose: true,
          message: "编辑成功"
        });
        this.AdddialogTwo = false;
        let json_two = {
          MN: "QueryPermission",
          DataContent: {
            KeyWord: "",
            IsDel: this.CheckboxVal,
            PId: this.AllPid,
            PageIndex: "1"
          }
        };
        this.MIX_send(json_two);
        let json_one = {
          MN: "QueryPermissionTree",
          DataContent: {}
        };
        this.MIX_send(json_one);
      } else {
        this.$message({
          showClose: true,
          message: data.Message
        });
      }
    }
  }
};
</script>

<style scoped>
#permission {
  display: flex;
  height: calc(100vh - 51px);
  position: relative;
}
.PerLeft {
  min-width: 180px;
  height: 100%;
  overflow-y: auto;
}
.Name {
  width: 180px;
  height: 45px;
  line-height: 45px;
  font-size: 24px;
  text-align: center;
}
.PerRight {
  width: calc(100% - 288px);
  flex: 1;
}
.operation {
  height: 40px;
  display: flex;
  justify-content: space-between;
  padding-left: 20px;
  padding-right: 20px;
}
.buttons {
  width: 310px;
  height: 40px;
  display: flex;
  justify-content: space-between;
}
.buttons > div {
  width: 90px;
  height: 40px;
  color: white;
  line-height: 40px;
  text-align: center;
  background: #108cee;
}
.inputs {
  height: 40px;
  display: flex;
  justify-content: space-between;
}
.inputs > div {
  height: 40px;
  line-height: 40px;
  text-align: center;
}
.check {
  width: 330px;
  height: 38px !important;
  margin-left: 80px;
  position: relative;
}
.check > input {
  height: 38px;
  border: none;
  line-height: 40px;
  width: 310px;
  border: 1px solid gray;
}
.check > i {
  position: absolute;
  right: 20px;
}
.Pages {
  margin-top: 50px;
  position: absolute;
  right: 100px;
}
</style>